<!doctypehtml>
    <title>PRD文档</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px
        }

        h1 {
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px
        }

        h2 {
            color: #444;
            margin-top: 30px
        }

        h3 {
            color: #555
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0
        }

        table,
        td,
        th {
            border: 1px solid #ddd
        }

        td,
        th {
            padding: 10px;
            text-align: left
        }

        th {
            background-color: #f5f5f5
        }

        pre {
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto
        }

        .mermaid {
            background-color: #fff;
            padding: 15px;
            border-radius: 4px;
            margin: 20px 0;
            text-align: center
        }
    </style>

    <body>
        <h1 id="_1">项目文档</h1>
        <h2 id="1">1. 项目概述</h2>
        <p>本项目是一个示例文档，展示Markdown的多级标题、段落、流程图和表格功能。</p>
        <h2 id="2">2. 系统架构</h2>
        <h3 id="21">2.1 整体架构</h3>
        <div class="mermaid">
            graph TD
            A[客户端] --> B(API网关)
            B --> C[用户服务]
            B --> D[订单服务]
            B --> E[支付服务]
            C --> F[(用户数据库)]
            D --> G[(订单数据库)]
            E --> H[(支付数据库)]
        </div>
        
        <h3 id="22">2.2 数据流图</h3>
        <div class="mermaid">
            flowchart LR
            用户注册 -->|提交信息| 用户服务
            用户服务 -->|存储数据| 数据库
            用户登录 -->|验证信息| 用户服务
            用户服务 -->|查询数据| 数据库
        </div>
        
        <h2 id="3">3. 功能模块</h2>
        <h3 id="31">3.1 用户管理</h3>
        <table>
            <thead>
                <tr>
                    <th>功能</th>
                    <th>描述</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>用户注册</td>
                    <td>新用户注册功能</td>
                    <td>✅ 完成</td>
                </tr>
                <tr>
                    <td>用户登录</td>
                    <td>用户登录认证功能</td>
                    <td>✅ 完成</td>
                </tr>
                <tr>
                    <td>密码重置</td>
                    <td>用户密码找回与重置</td>
                    <td>🚧 开发中</td>
                </tr>
            </tbody>
        </table>
        <h3 id="32">3.2 订单管理</h3>
        <table>
            <thead>
                <tr>
                    <th>订单状态</th>
                    <th>描述</th>
                    <th>数量</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>待支付</td>
                    <td>已创建未支付的订单</td>
                    <td>125</td>
                </tr>
                <tr>
                    <td>已支付</td>
                    <td>已完成支付的订单</td>
                    <td>342</td>
                </tr>
                <tr>
                    <td>已完成</td>
                    <td>已完成的订单</td>
                    <td>278</td>
                </tr>
            </tbody>
        </table>
        <h2 id="4">4. 开发进度</h2>
        <h3 id="41">4.1 里程碑计划</h3>
        <div class="mermaid">
            gantt
            title 项目开发甘特图
            dateFormat YYYY-MM-DD
            section 核心功能
            用户模块 :done, des1, 2023-01-01, 30d
            订单模块 :active, des2, 2023-02-01, 30d
            支付模块 : des3, 2023-03-01, 30d
        </div>
        
        <h3 id="42">4.2 团队分工</h3>
        <table>
            <thead>
                <tr>
                    <th>成员</th>
                    <th>职责</th>
                    <th>负责模块</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>后端开发</td>
                    <td>用户服务</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>前端开发</td>
                    <td>用户界面</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>测试工程师</td>
                    <td>全模块测试</td>
                </tr>
            </tbody>
        </table>
        <h2 id="5">5. 总结</h2>
        <p>本文档展示了Markdown的多种功能：</p>
        <ol>
            <li>多级标题结构</li>
            <li>段落文本</li>
            <li>流程图和图表</li>
            <li>表格展示</li>
        </ol>
        <p>可以通过复制这段代码到任何支持Markdown的编辑器(如Typora、VS Code等)查看渲染效果。</p>
        <script src=https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js></script>
        <script>mermaid.initialize({ startOnLoad: !0 })</script>